import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
import Animate from 'rc-animate';
import styles from './index.less';

interface EnvironTogglePropsType {
  visible: Boolean;
  onchange: React.Dispatch<React.SetStateAction<boolean>>;
}

const EnvironToggle = ({ visible = false, onchange = () => {} }: EnvironTogglePropsType) => {
  return (
    <Animate transitionName="fade">
      <img
        visible
        key="1"
        src={`/images/gis/environ-${visible ? 'right' : 'left'}.png`}
        onClick={() => onchange(!visible)}
        className={classnames(styles.environ, { [styles.in]: visible })}
      />
    </Animate>
  );
};

export default EnvironToggle;
